<template>
	<view class="">
		<view class="card">
			<view class="flex align_center marbot16">
				<view class="font28 bold ellipsis" style="max-width: 480rpx;margin-right: 12rpx;">{{item.title}}</view>
				<view class="tip" style="margin-right: 12rpx;">{{item.appear_type}}</view>
				<view class="tip">{{item.is_solve == 1?'未处理':item.is_solve == 2?'已处理':'办理中'}}</view>
			</view>
			<view class="marbot16">{{item.createtime}}</view>
			<!-- 语音展示 -->
			<view class="yuyinBox shodow flex align_center marbot16" style="width: 60%;" v-if="item.voice_file" @click.stop="handleYuyinPaly(item)">
				<view class="" style="margin-right: 10rpx;">
					<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!item.flag"></image>
					<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="item.flag"></image>
				</view>
				<view class="">{{item.voice_time}} "</view>
			</view>
			<!-- 普通展示 -->
			<view class="heis ellipsis3 marbot24">{{item.content}}</view>
			<!-- 九宫布局图片 -->
			<view class="flex flex_wrap">
				<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in item.material_files" :key='iten'>
					<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
					<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="">
				<u-tabs :list="tablist" @change="clickTab" :current="current" :is-scroll="false"></u-tabs>
				<!-- 办结中 -->
				<view class="" style="padding: 24rpx 0; border-top: 1rpx solid rgba(0,0,0,.2);" v-if="current == 0">
					<view class="flex marbot16">
						<view class="font28" style="color: #ff0000;margin-right: 8rpx;">*</view>
						<view class="hui">写下您的办理结果</view>
					</view>
					<view class="marbot16">
						<u-input v-model="describe" :height='400' :border='true' type="textarea" placeholder='写下您的办理结果'   placeholder-style='font-size:30rpx;font-weight:400;colr:rgba(0,0,0,.4)' :clearable='false' />
					</view>
					<u-button type="primary">提交办理结果</u-button>
				</view>
				<!-- 移交任务 -->
				<view class="" style="padding: 24rpx 0 0; border-top: 1rpx solid rgba(0,0,0,.4);" v-if="current == 1">
					<view class="flex justify_between align_center" style="padding: 0 0 24rpx 0;" @click="selectShow = true">
						<view class="flex font28">
							<view class="font28" style="color: #ff0000;margin-right: 8rpx;">*</view>
							<view class="hei">交办人</view>
						</view>
						<view class="flex align_center">
							<view :class="jiaobanName?'hei':'hui'" style="margin-right: 10rpx;">{{jiaobanName?jiaobanName:'请选择交办人'}}</view>
							<view class="">
								<u-icon name="arrow-right" color="rgba(0,0,0,.6)" size="28"></u-icon>
							</view>
						</view>
					</view>
					
					<view class="marbot24">
						<u-input v-model="describe" :height='400' :border='true' type="textarea" placeholder='写下您的交办建议'   placeholder-style='font-size:30rpx;font-weight:400;colr:rgba(0,0,0,.4)' :clearable='false' />
					</view>
					<u-button type="primary">确认移交</u-button>
				</view>
				<!-- AI建议 -->
				<view class="" style="padding: 24rpx 0; border-top: 1rpx solid rgba(0,0,0,.4);" v-if="current == 2">
					<view class="heis " style="min-height: 400rpx;padding: 0 20rpx;">确保重点用水、用电对象，对本单位的水、电系统等进行全面检查和加固，准备必要的一定量的饮用水和小型发电设备，安装各种自动保护装置，并制定相应的购置、保管、维护、使用制度，对本单位及系统内存在的易燃、易暴、剧毒、有害污染等次生灾害暴发区认真监护，采取切实可行的防灾减灾措施，对职工进行躲游方法的教育和宣传。督促有关部门做好易燃易爆、放射性和有毒物品的登记和保管工作。安装各种隔断、切断、自动保护装置。对各要害部位定期认真进行检查和维修</view>
				</view>
			</view>
		</view>
		
		<!-- 流程图 -->
		<view class="card">
			<view class="bold marbot24" style="font-size: 32rpx;">办理进程</view>
			<view class="">
				<view :class="index < 2?'steps_act':'steps'" v-for="(item,index) in 3" :key="index">
					<view class="flex">
						<view class="" style="margin-right: 20rpx;">
							<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" style="width: 80rpx;height: 80rpx;display: block;border-radius: 40rpx;"></image>
						</view>
						<view class="flex_1">
							<view class="flex ">
								<view class="" style="margin-right: 40rpx;">张三</view>
								<view class="" >2024-01-24 17:45</view>
							</view>
							<view class="flex hui martop16">
								<view class="" style="margin-right: 40rpx;">移交给：</view>
								<view class="heis" style="margin-right: 40rpx;">李驷</view>
							</view>
							<view class="flex hui martop16">
								<view class="" >办理结果描述办理结果描述办理结果描述办理结果描述办理结果描述办理结果描述</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" style="height: calc(constant(safe-area-inset-bottom) + 1rpx);height: calc(env(safe-area-inset-bottom) + 1rpx);"></view>
		
		<!-- 播放视频弹窗 -->
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
		
		<!-- 交办人下拉框 -->
		<u-select v-model="selectShow" mode="mutil-column-auto" value-name='id' label-name='name' child-name='children' :list="departmentList" @confirm="handelConfirm" @change='handelChange'></u-select>
		
		
		<!-- 模态框 -->
		<u-modal v-model="show" @confirm="confirm" :show-title="false" :show-cancel-button="true">
			<view class="wrap">
				<view class="title">
					交办给：
				</view>
				<address-item :info="assignPerson"></address-item>
				<view class="content">
					<view class="content-title">
						张三的诉求：
					</view>
					<view class="content-text">
						这是述求内容
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import videoMax from "@/components/video_max/video_max.vue";
	import AddressItem from '../address_list/address_item/AddressItem.vue'
	import {
		apiGetDepartmentCategory,
		apiGetDepartmentPerson,
		apiSearchByname
	} from '@/api/department/department.js'
	import {
		apiAppealRecord,
		apiGetAppealRecord,
		apiGetAppealByid
	} from '@/api/backlog/backlog.js'
	import CONFIG from '@/config/config.js'
	import { dateFormats } from '@/utils/utils.js'
	export default {
		
		name: 'task_detail',
		components: { videoMax,AddressItem },
		data () {
			return {
				tablist:[
					{name:'处理任务',id:1},
					{name:'移交任务',id:2},
					{name:'AI建议',id:3},
				],
				current:0,
				item:{
					type:1,
					music:'https://nf-sycdn.kuwo.cn/bef9fa365dd674fc38aa757532dd5ff9/65af569a/resource/n2/34/34/2796798189.mp3',
					time:60,
				},
				innerAudioContext:null,
				clearTime:null,   //定时器
				isShowVideo:false,
				videoUrl:'',
				describe:'',
				keyword:'',
				//模态框
				show: false,
				//代办事项id
				id: '',
				
				//部门列表
				departmentList: '',
				currentDepartmentIndex: 0,
				//人员列表
				personList: [],
				//交办人
				assignPerson: {},
				jiaobanName:'',
				jiaobanId:'',
				
				selectShow:false,
				selectList:[],
				
				baseUrl:'',
				appealInfo:{},
				
				
			}
		},
		async onLoad(e){
			this.innerAudioContext = uni.createInnerAudioContext();
			this.id = e.id
			console.log(e)
			this.baseUrl = CONFIG.baseUrl
			await this.apiGetDepartmentCategory();
			//默认选中第一项
			this.departmentList[0].isActive = true;
			this.apiGetDepartmentPerson(this.departmentList[0].id);
			this.apiGetAppealByid()
		},
		
		methods: {
			//获取代办事项详情
			async apiGetAppealByid() {
				const res = await apiGetAppealByid(this.id);
				console.log(res)
				let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
				let videoRegex = /(mp4|avi|mov)/i;
				let arr = []
				let url = ''
				let type = ''
				if(res.data.material_files.length != 0){
					let zongArr = res.data.material_files.split(',')
					zongArr.map((vv,ii)=>{
						url = this.baseUrl +  vv
						if(imageRegex.test(vv)){
							type = 'img'
						}
						if(videoRegex.test(vv)){
							type = 'video'
						}
						arr.push({url,type})
					})
				}
				
				res.data.material_files = arr
				res.data.createtime = dateFormats(res.data.createtime * 1000,'Y-m-d H:i')
				res.data.flag = false
				
				this.item = res.data;
				
			},
			async handelChange(e){
				console.log('监听返回值：',e)
				if(e.column == 0){
					this.id = this.departmentList[e.value].id
					this.apiGetDepartmentPerson(this.id);
				}
			},
			handelConfirm(e){  //选择的移交人
				console.log(e)
				this.jiaobanName = e[1].label
				this.jiaobanId = e[1].value
			},
			clickTab(e){
				this.current = e
			},
			handleImg(url){  // 查看图片
				uni.previewImage({
					urls:[url],
				})
			},
			handlecolse(){
				this.isShowVideo = false
			},
			handleVideo(url){  // 查看图片
				this.isShowVideo = true
				this.videoUrl = url
			},
			handleYuyinPaly(item){  // 语音播报
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				
				if(_this.innerAudioContext){
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.item.flag = false
					},item.voice_time * 1000)
				}else{
					_this.innerAudioContext = uni.createInnerAudioContext();
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.item.flag = false
					},item.voice_time * 1000)
				}
				
				this.item.flag = !item.flag
			},
			//tabs切换
			change(index) {
				this.current = index;
			},
			search () {
				this.apiSearchByname();
			},
			//点击联系人时触发
			handleClick(info) {
				this.assignPerson = info;
				this.show = true;
			},
			//模态框点击确定时触发
			async confirm() {
				await this.apiAppealRecord();
				await uni.showToast({
					title: '交办成功',
					icon: "success"
				})
				// this.$Router.back(2);
			},
			//部门列表点击事件
			handleChangeActive(item, index) {
				if (this.currentDepartmentIndex === index) return;
				this.currentDepartmentIndex = index;
				this.apiGetDepartmentPerson(item.id);
			},
			//获取部门分类
			async apiGetDepartmentCategory() {
				const res = await apiGetDepartmentCategory(this.id);
				// const res = await apiGetDepartmentCategory({
				// 	addtabs: 1,
				// 	sort: 'id',
				// 	order: 'desc',
				// 	offset: 0,
				// 	limit: 10,
				// 	filter: {},
				// 	op: {},
				// });
				this.departmentList = res.data;
				this.departmentList.forEach(item => {
					item.isActive = false;
					item.image = CONFIG.baseUrl + item.image;
					item.children = []
				})
				console.log(res)
			},
			//获取部门下人员
			async apiGetDepartmentPerson(id) {
				const res = await apiGetDepartmentPerson(id);
				if (!res.data) {
					res.data = [];
				}
				this.personList = res.data;
				// console.log(this.personList)
				// //为人员信息添加部门名字
				// console.log(this.departmentList)
				// this.personList.forEach(item => {
				// 	item.departmentName = this.departmentList[this.currentDepartmentIndex].name;
				// })
				this.departmentList.map((v,i)=>{
					if(v.id == id){
						v.children = this.personList
					}
				})
			},
			//交办事项
			async apiAppealRecord () {
				const organization_classify_id = getApp().globalData.organization_classify_id;
				const res = await apiAppealRecord(this.id, this.assignPerson.id, 1, this.remark, '', '', organization_classify_id);
			},
			//根据名字搜索
			async apiSearchByname () {
				const res = await apiSearchByname(this.keyword);
				this.personList = res.data.list;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,body{
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
	}
	.card{
		padding: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;
		.tip{
			padding: 2rpx 4rpx;
			border-radius: 8rpx;
			border: 1rpx solid #FF7D04;
			color: #FF7D04;
			font-size: 24rpx;
		}
		.yuyinBox{
			padding: 20rpx 24rpx;
			border-radius: 10rpx;
			background: #2979ff;
			color:#fff;
		}
		.steps{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: rgba(0,0,0,.4);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid rgba(0,0,0,.4);
				border-radius: 12rpx;
				background:  #fff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
		.steps_act{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: #2979ff;;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 12rpx;
				border: 1rpx solid #2979ff;;
				background:  #2979ff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
	}
	.wrap {
		padding: 30rpx;
		padding-bottom: 47rpx;
	
		.title {
			color: red;
			font-size: 34rpx;
			font-weight: 500;
			color: #000000;
		}
	
		.content {
			padding: 20rpx;
			height: 150rpx;
			background: #EAF1F9;
			border-radius: 10rpx;
	
			.content-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #929292;
			}
	
			.content-text {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #929292;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
	.marbot24{
		margin-bottom: 24rpx;
	}
	.marbot16{
		margin-bottom: 16rpx;
	}
	.marbot12{
		margin-bottom: 12rpx;
	}
	.martop24{
		margin-top: 24rpx;
	}
	.martop16{
		margin-top: 16rpx;
	}
</style>